import React from 'react';
import ReactMarkdown from 'react-markdown';
import { Card } from '../../types/index';
import styles from './Review.module.css';

// 添加ReviewFeedback枚举
export enum ReviewFeedback {
  FORGOT = 0,
  FUZZY = 3,
  REMEMBERED = 5
}

/* 复习卡片组件，props如下： 
-card，当前复习的卡片数据
-showAnswer，boolean，是否显示答案
-onShowAnswer，函数，点击"显示答案"按钮后的处理逻辑
-onFeedback，函数，点击"忘记"、"模糊"、"记得"后的处理逻辑
-getNotebookName，函数，获取当前卡片所在笔记本名称
*/
const ReviewCard: React.FC<{
  card: Card;
  showAnswer: boolean;
  onShowAnswer: () => void;
  onFeedback: (feedback: ReviewFeedback) => void;
  getNotebookName: (id: string) => string;
}> = ({ card, showAnswer, onShowAnswer, onFeedback, getNotebookName }) => (
  <div className={styles.reviewCard}>
    <div className={styles.reviewCardContent}>
      <div className={styles.cardHeader}>
        <h3>{card.title}</h3>
        <span className={styles.notebookBadge}>
          笔记本: {getNotebookName(card.notebook_id)}
        </span>
      </div>
      {!showAnswer ? (
        <div className={styles.showAnswerContainer}>
          <button className={styles.btnPrimary} onClick={onShowAnswer}>
            显示答案
          </button>
        </div>
      ) : (
        <div className={styles.markdownContent}>
          <ReactMarkdown>{card.content}</ReactMarkdown>
        </div>
      )}
    </div>
    {showAnswer && (
      <div className={styles.reviewActions}>
        <button
          className={`${styles.btnReview} ${styles.forget}`}
          onClick={() => onFeedback(ReviewFeedback.FORGOT)}
        >
          <i className="bi bi-x-lg"></i> 忘记
        </button>
        <button
          className={`${styles.btnReview} ${styles.fuzzy}`}
          onClick={() => onFeedback(ReviewFeedback.FUZZY)}
        >
          <i className="bi bi-dash-lg"></i> 模糊
        </button>
        <button
          className={`${styles.btnReview} ${styles.remember}`}
          onClick={() => onFeedback(ReviewFeedback.REMEMBERED)}
        >
          <i className="bi bi-check-lg"></i> 记得
        </button>
      </div>
    )}
  </div>
);

export default ReviewCard; 